<template lang="html">
  <div class="lengthways-list">
    <div class="shop-img-wrap">
      <img class="big-img" :src="data.product_image" alt="" />
      <slot name="tag-img"></slot>
    </div>
    <div class="shop-desc">
      <span class="shop-desc-text">{{data.product_short_name}}</span>
      <!-- <slot name="tag-text"></slot> -->
      <div class="prd_tag">
      <template v-for="(i, index) in data.activity_tab_names" :index="index">
        <div class="" :key="index">
          <div v-if="i === '券'" class="coupon">{{i}}</div>
           <div v-else class="discount">{{i}}</div>
        </div>
      </template>
    </div>
        <div class="prd_price shop-price">
          <span style="color:#E91F3F;font-size:16px;padding-right:10px;">￥{{data.product_unit_price}}</span>
          <span style="color:#999999;font-size:12px;text-decoration:line-through;">￥{{data.product_market_price}}</span>
        </div>
    </div>
    <slot name="big-btn"></slot>
  </div>
</template>

<script>

export default {
  props: {
    data: {
      type: Object,
      value: {}
    }
  },
  data () {
    return {}
  },
  created () {
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.lengthways-list{height:100%;padding-bottom:30px;margin:5px 0 0 0}
.shop-img-wrap{position:relative;height:160px;background-color:#edeff2;margin:10px 10px 5px 10px;}
.big-img{width:100%;height:100%;position:absolute;margin:auto;top:0;left:0;right:0;bottom:0}
.tag-img{position:absolute;bottom:0;right:0;width:40px;height:20px}
.shop-desc{position:relative;text-align:left;padding:0 15px 12px 15px;}
.shop-desc-text{color:#333;font-size:14px;word-break:break-all;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.shop-price{float:left;padding:5px 0 10px 0;font-size:12px}
.prd_price .buy_price{height:18px;line-height:18px;background:#dfc399;display:inline-block;color:#fff;padding:0 5px;position:relative;vertical-align:middle}
.prd_price .price_icon{display:inline-block;width:13px;height:18px;background-repeat:no-repeat;background-size:contain;vertical-align:middle}
.prd_price .buy_tips{vertical-align:middle;height:18px;line-height:18px;padding:0 5px 0 2px;color:#ddb074}
.price1-color{color:red;font-size:16px}
.price2-color{color:#ccc;font-size:12px}
.prd_tag .discount {
  height: 14px;
  border-radius: 2px;
  font-size: 12px;
  text-align: center;
  line-height: 14px;
  color: #fff;
  margin-right: 5px;
  padding: 0 5px;
  background-color: #E91F3F;
  float: left;
}
.prd_tag {
  height: 14px;
  margin-top: 2px;
}
.prd_tag .coupon {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  font-size: 12px;
  text-align: center;
  line-height: 14px;
  color: #ffffff;
  margin-right: 5px;
  background-image: url('https://mjmh.meijiameihuo.com/wechat/images/home/coupon.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  float: left;
}
</style>
